<template>
	<div class="">
		<!-- 任务状态 -->
		<div class="inStatus1">
			<div class="taskStatus1">
				
			</div>
			<span class="chartIn">任务点已完成</span>
		</div>
		<!-- end -->
		<!-- 章节测验区域 -->
		<!-- 成绩 -->
		<div class="score">
			<div class="">
				<span class="NameIN">红色卫生文化</span>
				<span class="NStatus">已完成</span>
			</div>
			<div class="">
				本次成绩：100
			</div>
		</div>
		<!-- end -->
		<div class="testContent">
			<div class="myQW" v-for="(item,index) in textList" :key="index">
				<!-- 题目区域 -->
				<div class="myQuestion">
					{{index+1}}、{{item.question}}
				</div>
				<!-- end -->
				<!-- 单选选项区域 -->
				<div class="inOption" v-if="item.typeof == 0">
					<div class="myOPto" v-for="(it,ind) in item.option" :key="ind">
						 <el-radio v-model="item.radio" :label="ind" border>{{it.optionContent}}</el-radio>
					</div>
				</div>
				<!-- end -->
				
				<!-- 多选选项区域 -->
				<div class="inOption" v-if="item.typeof == 1">
					<div class="myOPto" v-for="(it,ind) in item.option" :key="ind">
						 <el-checkbox v-model="it.checked" :label="ind" border>{{it.optionContent}}</el-checkbox>
					</div>
				</div>
				<!-- end -->
				
				<!-- 单选选项区域 -->
				<div class="inOption" v-if="item.typeof == 2">
					<div class="">
						<div class="" style="margin-top: 16px;">
								<el-radio v-model="item.radio"  label="1" border>对</el-radio>
						</div>
						<div class="" style="margin-top: 16px;">
								<el-radio v-model="item.radio" label="2" border>错</el-radio>
						</div>
					</div>
					</div>
				<!-- end -->
				
			</div>
		</div>
		<!-- end -->
	</div>
</template>

<script>
	export default {
	  data() {
	    return {
	      textList: [
			  {
				  id: 0,
				  typeof: 0,
				  radio: -1,
				  question: '思是指事物所包含的实质性事物。思是指事物所包含的实质性事物思是指事物所包含的实质性事物思是指事物所包含的实质性事物思是指事物所包含的实质性事物思是指事物所包含的实质性事物',
				  option: [
					  {
						  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
					  },
					  {
						  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
					  },
					  {
						  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
					  },
					  {
						  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
					  },
					  {
						  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
					  }
				  ]
			  },
			  {
					  id: 0,
					  typeof: 1,
					  radio: -1,
					  question: '思是指事物所包含的实质性事物。',
					  option: [
						  {
							  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
							  checked: false 
						  },
						  {
							  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
							  checked: false 
						  },
						  {
							  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
							  checked: false 
						  },
						  {
							  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
							  checked: false 
						  },
						  {
							  optionContent: '一个艺术作品的表现、基本含义、意味或审美价值。',
							  checked: false 
						  }
					  ]
			  },
			  {
			  					  id: 0,
			  					  typeof: 2,
			  					  radio: -1,
			  					  question: '思是指事物所包含的实质性事物。',
			  }
		  ]
	    }
	  }
	}
</script>

<style>
	.chartIn{
		font-weight: bold;
	}
	.NameIN{
		font-size: 18px;
	}
	.NStatus{
		margin-left: 6px;
		color: red;
	}
	.score{
		width: auto;
		margin:32px 16px 0 16px;
		border-bottom: solid 1px #eef2f5;
		padding-bottom: 32px;
		display: flex;
		justify-content: space-between;
	}
	.myQW{
		margin-top: 24px;
		padding-bottom: 24px;
		border-bottom: solid 1px #eef2f5;
	}
	.myOPto{
		margin-top: 16px;
	}
	.inOption{
		margin-top: 16px;
	}
	.myQuestion{
		letter-spacing: 1pt;
		font-size: 18px;
		line-height: 1.5;
	}
	.testContent{
		padding: 16px 16px 0 16px;
	}
	.taskStatus1{
		margin-left: 16px;
		width: 20px;
		height: 20px;
		background-color: #7a9933;
		border-radius: 50%;
		margin-right: 6px;
	}
	.inStatus1{
		margin-top: -32px;
		width: 875px;
		display: flex;
		align-items: center;
	}
</style>
